<template>
  <!-- 每一列之间的间隔为20px (实际上是每列左右各10px，加起来20px)-->
  <el-row :gutter="20">
    <el-col :span="6">
      <TotalSale :report-data="reportData"/>
    </el-col>
    <el-col :span="6">
      <TotalOrder :report-data="reportData"/>
    </el-col>
    <el-col :span="6">
      <TodayUser :report-data="reportData"/>
    </el-col>
    <el-col :span="6">
      <TotalUser :report-data="reportData"/>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import TotalSale from './TotalSale.vue'
import TotalOrder from './TotalOrder.vue'
import TodayUser from './TodayUser.vue'
import TotalUser from './TotalUser.vue'
import { getReportData } from '@/api'
const reportData=ref({})

onMounted(async()=>{
 reportData.value=await getReportData()
})

</script>

<style lang="scss" scoped>
:deep(span) {
  /* 所有子组件中的 span 元素都会应用这些样式 */
  font-size: 14px;
  color: #464545;
  &.css-1 {
    margin-left: 8px;
    font-weight: 550;
  }
  &.increase {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 10px;
    border-width: 4px;
    border-color: transparent transparent green transparent;
    border-style: solid;
    transform: translateY(-50%);
  }
  &.decrease {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 10px;
    border-width: 4px;
    border-color: red transparent transparent transparent;
    border-style: solid;
  }
}
</style>
